<template>
  <div>
    <el-form label-width="120px" :inline="true" :rules="appointmentConfirmConst.treatmentInfo_rules" ref = 'treatmentInfoForm'
             :model="dialogLeftTop1_1_data">
      <el-form-item label="就诊卡号" prop="medicare">
        <el-select v-model="dialogLeftTop1_1_data.medicare" filterable remote reserve-keyword placeholder="请输入卡号获取病人" :remote-method="getPatientByMedicare"
                   :loading="loading" @change="handleMedicareChange" @blur="selectBlur" style='width: 196px'>
          <el-option v-for="item in idCardOptions" :key="item.medicare" :label="item.medicare" :value="item.medicare"></el-option>
        </el-select>
      </el-form-item>
      <br/>
      <el-form-item label="患者姓名" prop="patientName">
        <el-input v-model="dialogLeftTop1_1_data.patientName" auto-complete="off" placeholder="请输入姓名" style='width: 196px'></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="dialogLeftTop1_1_data.phone" auto-complete="off" placeholder="请输入联系电话" style='width: 196px'></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="idCard">
        <el-input v-model="dialogLeftTop1_1_data.idCard" auto-complete="off" placeholder="请输入身份证" style='width: 196px'></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <dict-select v-model="dialogLeftTop1_1_data.sex" placeholder="请选择性别" style='width: 196px' dict-code="xb">
        </dict-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="dialogLeftTop1_1_data.age" auto-complete="off" placeholder="请输入年龄" style='width: 196px'></el-input>
      </el-form-item>
      <el-form-item label="就诊日期" prop="visitDate">
        <el-date-picker type="date" placeholder="选择日期" v-model="dialogLeftTop1_1_data.visitDate" style='width: 196px;'
                        value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
      </el-form-item>
      <el-form-item label="就诊科室" prop="visitDepartment">
        <el-select v-model="dialogLeftTop1_1_data.visitDepartment" placeholder="请选择就诊科室" style='width: 196px'
                   filterable remote reserve-keyword :remote-method="getOrganization" :loading="loading">
          <el-option v-for='item in dialogLeftTop1_1_data_departmentList' :label="item.name" :value="item.id"
                     :key='item.id'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="就诊医生" prop="visitDoctor">
        <el-select v-model="dialogLeftTop1_1_data.visitDoctor" filterable remote reserve-keyword placeholder="请选择就诊医生" style='width: 196px'
                   :remote-method="getDoctor" :loading="loading">
          <el-option v-for='item in dialogLeftTop1_1_data_doctorList' :label="item.name" :value="item.id"
                     :key='item.id'></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="诊断" prop="diagnosis">
        <el-input type='textarea' v-model="dialogLeftTop1_1_data.diagnosis" auto-complete="off" placeholder="请输入诊断"
                  style='width: 196px;'></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import _ from 'lodash'
  import dictSelect from '@/views/form/dictSelect'
  import { appointmentConfirmConst } from '@/yimiviews/appointmentManage/columnsConst'
  import { getPatientByMedicare } from '@/api/appointmentManage/appointmentConfirm'
  import { getOrganizationList, getDoctorList } from '@/api/common/common'
  export default {
    components: {
      dictSelect
    },
    data() {
      return {
        dialogLeftTop1_1_data_departmentList: [],
        dialogLeftTop1_1_data_doctorList: [],
        appointmentConfirmConst,
        loading: false,
        idCardOptions: [],
        selectedItem: []
      }
    },
    props: {
      dialogLeftTop1_1_data: {
        type: Object,
        default: function() {
          return {}
        }
      }
    },
    mounted() {
      this.getPatientByMedicare(' ')
      this.getOrganization(' ')
      this.getDoctor(' ')
    },
    methods: {
      submit() {
        let validFlag = false
        this.$refs['treatmentInfoForm'].validate((valid) => {
          if (valid) {
            validFlag = true
          }
        })
        return validFlag
      },
      getPatientByMedicare(query) {
        if (query.trim() !== '') {
          this.loading = true
          setTimeout(() => {
            getPatientByMedicare(query.toLowerCase()).then((res) => {
              this.loading = false
              this.idCardOptions = res.data.list
            })
          }, 200)
        } else {
          this.idCardOptions = []
        }
      },
      handleMedicareChange(medicare) {
        const finded = _.find(this.idCardOptions, { medicare: medicare })
        if (finded) {
          this.dialogLeftTop1_1_data.patientName = finded.patientName
          this.dialogLeftTop1_1_data.phone = finded.phone
          this.dialogLeftTop1_1_data.idCard = finded.idCard
          this.dialogLeftTop1_1_data.sex = finded.sex
          this.dialogLeftTop1_1_data.age = finded.age
          /*
          this.dialogLeftTop1_1_data.medicare = finded.medicare
          this.dialogLeftTop1_1_data.visitDate = finded.visitDate
          this.dialogLeftTop1_1_data.visitDepartment = finded.visitDepartment
          this.dialogLeftTop1_1_data.visitDoctor = finded.visitDoctor
          this.dialogLeftTop1_1_data.diagnosis = finded.diagnosis
          */
          this.dialogLeftTop1_1_data.patientId = finded.patientId
        }
      },
      getOrganization(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            getOrganizationList({ keyword: query.toLowerCase(), parentId: 1 }).then((res) => {
              this.loading = false
              this.dialogLeftTop1_1_data_departmentList = res.data.list
            })
          }, 200)
        } else {
          this.dialogLeftTop1_1_data_departmentList = []
        }
      },
      getDoctor(query) {
        if (query !== '') {
          this.loading = true
          setTimeout(() => {
            getDoctorList({ keyword: query.toLowerCase(), type: 1 }).then((res) => {
              this.loading = false
              this.dialogLeftTop1_1_data_doctorList = res.data.list
            })
          }, 200)
        } else {
          this.dialogLeftTop1_1_data_doctorList = []
        }
      },
      selectBlur(e) {
        this.dialogLeftTop1_1_data.medicare = e.target.value
      }
    }
  }
</script>

